<template>
  <div
    class="chat-container"
    style="
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 420px;
      margin: 0 auto;
    "
  >
    <div class="container-head flex" style="background: #09d0ce">
      <div style="-webkit-app-region: drag; color: #ffffff">会话</div>
      <div style="flex: 1; height: 46px; -webkit-app-region: drag"></div>
      <div class="head-right flex">
        <div class="user-info flex">
          <div class="window-close" style="cursor: pointer;" @click="winClose"></div>
        </div>
      </div>
    </div>
    <div class="chat-list-box" id="main">
      <div
        class="chat-list-item"
        v-for="(item, index) in chatList"
        :key="'chat' + index"
      >
        <div class="service-chat" v-if="item.ref_user == 1">
          <img class="chat-header" src="~@/assets/service-icon.png" alt="" />
          <div class="chat-text" v-html="item.content">
<!--            {{ item.content }}-->
          </div>
        </div>
        <div class="user-chat" v-if="item.ref_user == 2">
          <div class="chat-text">
            {{ item.content }}
          </div>
          <img class="chat-header" src="~@/assets/user-icon.png" alt="" />
        </div>
        <div class="chat-time">{{ item.datetime }}</div>
      </div>
    </div>
    <div class="chat-inputs">
      <textarea
        ref="chatInput"
        class="chat-input"
        v-model="sendValue"
      />
      <div class="chat-send" @click="send">回复工单</div>
    </div>
  </div>
</template>

<script>
import { ticketView,updateTicket } from "../../utils/api";
export default {
  name: "chat",
  data() {
    return {
      chatList: [
        // {
        //   ref_user: 1,
        //   content: "你好，有什么可以帮助您吗?",
        //   datetime: "2020-12-11  09:28:19",
        // },
        // {
        //   ref_user: 2,
        //   content: "你好，现在开年卡有活动吗？",
        //   datetime: "2020-12-11  09:36:52",
        // },
        // {
        //   ref_user: 1,
        //   content: "现在开通年卡可以送半年，邀请朋友办理最高可以获得50元优惠卷",
        //   datetime: "2020-12-11  09:37:52",
        // },
        // {
        //   ref_user: 2,
        //   content: "好的，谢谢！",
        //   datetime: "2020-12-11  12:36:52",
        // },
        // {
        //   ref_user: 1,
        //   content: "不客气！",
        //   datetime: "2020-12-11  13:28:19",
        // },
      ],
      sendValue:'',
      id: ''
    };
  },
  methods: {
    winClose() {
      this.sendValue = ''
      this.$emit('closeChat')
    },
    send() {
      if (this.sendValue == "") {
        this.$message.error("请输入消息内容");
        return;
      }
      let data = {
        main_id: this.id,
        content: this.sendValue
      }
      updateTicket(data).then((res) => {
        this.loading = false;
        if (res.data.ret == 1) {
          this.handTicketView(this.id)
          this.sendValue = "";
          this.$nextTick(() => {
            let msg = document.getElementById('main') // 获取对象
            msg.scrollTop = msg.scrollHeight + 100// 滚动高度
          })
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(() => {
        this.loading = false;
      });
    },
    handTicketView(id) {
      this.id = id;
      this.loading = true;
      ticketView(id)
        .then((res) => {
          this.loading = false;
          if (res.data.ret == 1) {
            let data = res.data.data.content_list;
            this.chatList = data
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    // this.handTicketView();
  },
};
</script>

<style>
.chat-inputs {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  background: #24262f;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-list-box {
  flex: 1;
  background: #303440;
  overflow: auto;
  padding: 32px 20px;
}
.chat-header {
  width: 36px;
  height: 36px;
}
.service-chat {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.user-chat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.chat-text {
  display: flex;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  max-width: 212px;
  min-height: 36px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.service-chat .chat-text {
  background: #c3c3c3;
  margin-left: 10px;
}
.user-chat .chat-text {
  background: #09d0ce;
  margin-right: 10px;
}
.chat-time {
  width: 136px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
  margin: 12px auto 30px auto;
}
.chat-input {
  width: 100%;
  height: 126px;
  background: #24262f;
  border-radius: 8px;
  padding: 5px 10px;
  color: #ffffff;
  outline: none;
  resize: none;
}
.chat-send {
  width: 76px;
  height: 36px;
  background: #09d0ce;
  border: 1px solid #4a4e59;
  border-radius: 8px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 5px;
}
</style>